<template>
  <div class="container">
    <div v-loading="fullscreenLoading" element-loading-text="正在分析数据...请勿重复刷新哦~"
         ref="chart" class="chart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import dataApi from "@/api/dataApi";

export default {
  name: "View3",
  data() {
    return {
      fullscreenLoading: false
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      this.fullscreenLoading = true;
      dataApi.getBrandNameCount().then(resp => {
        const myChart = echarts.init(this.$refs.chart)
        var option = {
          title: {
            text: '各品牌销量占比',
            left: 'center',
            textStyle: {
              fontSize: 30
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: resp.data.map(item => item.name)
          },
          series: [
            {
              name: '人流量',
              type: 'pie',
              radius: '55%',
              center: ['50%', '50%'],
              data: resp.data,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              avoidLabelOverlap: false,
              label: {
                show: true,
                formatter: '{b}: {c} ({d}%)',
                position: 'outside'
              },
              labelLine: {
                show: true,
                length: 10,
                length2: 20
              }
            }
          ],
          color: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a']
        };

        myChart.setOption(option);
        this.fullscreenLoading = false
      })
    }
  }

}
</script>

<style scoped lang="scss">
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
}

.chart {
  width: 100%;
  height: 90%;
  min-height: 300px; /* 设置最小高度，避免图表内容过少时显示不全 */
}
</style>
